<template>
  <div class="contant-box">
    <el-button type="primary" style="width: 100%" @click="search"
      >社区发现分析</el-button
    >
  </div>
</template>

<script lang="ts" setup>
// vue
import { emitter } from "@/utils/mitt"; // 组件通讯
import { Algorithm } from "@antv/g6";

// 组件
import { ElMessage } from "element-plus";
import { useCanvasStoreHook } from "@/stores/modules/canvas"; // 画布

const useCanvasStore = useCanvasStoreHook(); // 画布

const graphModule = inject("graphModule");

// console.log(useCanvasStore.getCanvasByData(), 9999);
emitter.on("communityDetection", () => {
  // 节点拖动后需要根据节点位置重新渲染
  search();
});

/** 查询分析 */
const search = () => {
  const { louvain } = Algorithm;
  // result 中包含 clusters 与 clusterEdges 数组。data 中的每个节点数据将带有 clusterId 字段
  const nodes = JSON.parse(JSON.stringify(useCanvasStore.getCanvasByData()));
  let result = louvain(nodes);
  console.log(result, "result");
  graphModule.value.removeHulls();
  result.clusters.forEach((cluster, i) => {
    graphModule.value.createHull({
      id: cluster.id,
      type: "smooth-convex",
      padding: 30,
      members: cluster.nodes.map((node) => node.id),
      // style: {
      //   fill: "lightgreen",
      //   stroke: "green",
      // },
    });

    // console.log(
    //   cluster.nodes.map((node) => node.id),
    //   hull
    // );
  });
};
</script>

<style lang="scss" scoped>
.contant-box {
  height: calc(100% - 36px);

  .edit-icon {
    margin-left: 20px;
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
